<template>
    <div>
        <el-submenu v-if="menu_items && menu_items.children.length > 0 && menu_items.type == '1'" :index="menu_items.path">
            <template slot="title">
                <i class="el-icon-s-unfold"></i>
                <span slot="title">{{ menu_items.label }}</span>
            </template>
            <menuTree v-for="item in menu_items.children" :key="item.path" :menu_items="item" />
        </el-submenu>
        <el-menu-item v-else :index="menu_items.path" :key="menu_items.path" @click="toRouter(menu_items)">
            <i class="el-icon-menu"></i>
            <span slot="title">{{ menu_items.label }}</span>
        </el-menu-item>
    </div>
</template>

<script>
    export default {
        name: 'menuTree',
        props: ['menu_items'],
        data() {
            return {}
        },
        methods: {
            /**
             * @param {{name:string,path:string,label: string,children: []}} item
             */
            toRouter(item) {
                let route_huily = {
                    // name: item.name,
                    path: item.path,
                    components: {
                        mainpage: require(`@/components${item.path}.vue`).default
                    },
                    parent: 'main',
                }
                this.$store.commit('routerManage/AddRoute_HuiLY', route_huily)
                this.$store.commit('SetActiveTab', item.path)
                this.$store.commit('AddTabList', {
                    path: item.path,
                    label: item.label,
                    closable: true,
                    component: route_huily.components.mainpage
                })
            }
        },
        mounted() {
            this.toRouter({
                path: '/diary/diary',
                label: '伴宠日记',
                children: []
            })
        }
    }
</script>

<style scoped></style>